import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const BadgeTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    box: { width: 48, height: 48, borderRadius: 12, backgroundColor: colors.surface, alignItems: 'center', justifyContent: 'center' },
  });

  return (
    <Layout.Page headerShown headerProps={{ title: 'Badge 测试', backVisible: true }} padding={16} scrollable>
      {/* 基础：solid / outline、预设颜色与自定义颜色 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>variant: solid / outline；color: 预设(primary/success/...)或自定义颜色</UI.Text>
          <View style={styles.row}>
            <UI.Badge text="Solid" color="primary" variant="solid" testID="badge-basic-solid-primary" />
            <UI.Badge text="Outline" color="success" variant="outline" testID="badge-basic-outline-success" />
            <UI.Badge text="Custom" color="#8A2BE2" variant="solid" testID="badge-basic-solid-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：small / medium / large / 自定义数值 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: small / medium / large / number</UI.Text>
          <View style={styles.row}>
            <UI.Badge text="S" size="small" testID="badge-size-small" />
            <UI.Badge text="M" size="medium" testID="badge-size-medium" />
            <UI.Badge text="L" size="large" testID="badge-size-large" />
            <UI.Badge text="40" size={40} testID="badge-size-40" />
          </View>
        </Layout.Card>
      </View>

      {/* 数值与上限：value/max/showZero */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>数值展示</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>value 与 max；showZero 控制 0 的展示</UI.Text>
          <View style={styles.row}>
            <UI.Badge value={0} showZero testID="badge-value-0-show" />
            <UI.Badge value={0} showZero={false} testID="badge-value-0-hide" />
            <UI.Badge value={99} max={9} testID="badge-value-max-9" />
            <UI.Badge value={12} max={99} testID="badge-value-max-99" />
            <UI.Badge text="文本" testID="badge-text-fixed" />
          </View>
        </Layout.Card>
      </View>

      {/* 小圆点：dot 模式 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>Dot 模式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>dot: true 时显示小圆点，可与 size、color 组合</UI.Text>
          <View style={styles.row}>
            <UI.Badge dot color="warning" size="small" testID="badge-dot-small" />
            <UI.Badge dot color="error" size="medium" testID="badge-dot-medium" />
            <UI.Badge dot color="#FF2D55" size={16} testID="badge-dot-16" />
          </View>
        </Layout.Card>
      </View>

      {/* 角标：position + offset 附着在子元素上 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>角标附着</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>position: top-right/top-left/bottom-right/bottom-left；offset 调整偏移</UI.Text>
          <View style={{}}>
            <UI.Badge value={8} position="top-right" offset={{ x: 0, y: 0 }} testID="badge-corner-tr">
              <View style={[styles.box, { width: 48, height: 48, backgroundColor: colors.primary }]} />
            </UI.Badge>

            <UI.Badge value={8} position="top-left" offset={{ x: 2, y: 2 }} color="success" testID="badge-corner-tl">
              <View style={[styles.box, { width: 48, height: 48 }]} />
            </UI.Badge>

            <UI.Badge value={8} position="bottom-right" offset={{ x: 2, y: 2 }} color="secondary" testID="badge-corner-br">
              <View style={[styles.box, { width: 48, height: 48 }]} />
            </UI.Badge>

            <UI.Badge value={8} position="bottom-left" offset={{ x: 2, y: 2 }} color="#5856D6" testID="badge-corner-bl">
              <View style={[styles.box, { width: 48, height: 48 }]} />
            </UI.Badge>
          </View>
        </Layout.Card>
      </View>

      {/* 阴影：shadowSize 预设 + 自定义阴影覆盖 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>阴影</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>shadowSize: xs/sm/md/lg/xl/glow；亦可自定义 shadowColor/Offset/Opacity/Radius</UI.Text>
          <View style={styles.row}>
            <UI.Badge text="XS" color="primary" shadowSize="xs" testID="badge-shadow-xs" />
            <UI.Badge text="SM" color="primary" shadowSize="sm" testID="badge-shadow-sm" />
            <UI.Badge text="MD" color="primary" shadowSize="md" testID="badge-shadow-md" />
            <UI.Badge text="LG" color="primary" shadowSize="lg" testID="badge-shadow-lg" />
            <UI.Badge text="XL" color="primary" shadowSize="xl" testID="badge-shadow-xl" />
            <UI.Badge text="Glow" color="primary" shadowSize="glow" testID="badge-shadow-glow" />
            <UI.Badge text="Custom" color="primary" shadowColor={colors.primary} shadowOffset={{ width: 0, height: 2 }} shadowOpacity={0.35} shadowRadius={6} testID="badge-shadow-custom" />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default BadgeTestScreen;